<!--
 * @Author: ZRX
 * @Date: 2024-01-08 14:17:35
 * @LastEditors: sueRimn
 * @LastEditTime: 2024-01-16 14:00:19
 * @Descripttion: 
 * @version: 
-->
<template>
	<el-dropdown trigger="click" @command="changeLanguage" popper-class="language_box">
		<div class="toolbar-link">
			<img v-if="language == 'zh'" src="@/assets/images/china.png" />
			<img v-else src="@/assets/images/russia.png" />
		</div>
		<template #dropdown>
			<el-dropdown-menu>
				<!-- <el-dropdown-item v-for="item in languageList" :key="item.value" :command="item.value" :disabled="language === item.value"> -->
				<el-dropdown-item v-for="item in languageList" :key="item.value" :command="item.value">
					<img class="language_img" :src="getAssetURL(item.url)" />
					{{ item.label }}
				</el-dropdown-item>
			</el-dropdown-menu>
		</template>
	</el-dropdown>
	<div>
		<!-- <div class="toolbar-link" @click.stop="showLanguage">
			<img v-if="language == 'zh'" src="@/assets/images/china.png" />
			<img v-else src="@/assets/images/russia.png" />
		</div> -->
		<!-- <el-drawer v-model="drawer" title="" size="360px" :with-header="false">
			<div class="languages-content">
				<div class="header flx-justify-between" @click="showLanguage">
					<div class="header-label">{{ $t("translate.label") }}</div>
					<el-icon>
						<ArrowRight />
					</el-icon>
				</div>
				<div class="languages-boxes">
					<div class="language-box" v-for="(item,index) in languageList" :key="index">
						<div class="language-option">
							<input type="radio" name="language_selection" :checked="item.value==language" @change="changeLanguage" :value="item.value">
							<div class="language-option-inner">
								<img :src="getAssetURL(item.url)" />
								<div class="indicator">
									<el-icon size="10px" color="#fff">
										<Check />
									</el-icon>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="img-wrap">
					<img src="@/assets/images/languages.png" alt="" />
				</div>
			</div>
		</el-drawer> -->
	</div>

</template>

<script setup lang="ts">
	import { useI18n } from "vue-i18n";
	import { ref, computed } from "vue";
	import { useGlobalStore } from "@/stores/modules/global";
	import { LanguageType } from "@/stores/interface";
	import { useTabsStore } from "@/stores/modules/tabs";
	import { useAuthStore } from "@/stores/modules/auth";
	const tabStore = useTabsStore();
	const i18n = useI18n();
	const globalStore = useGlobalStore();
	const authStore = useAuthStore();
	const tabsMenuList = computed(() => tabStore.tabsMenuList);
	const language = computed(() => globalStore.language);
	const drawer = ref(false);
	const languageList = [
		{ label: "中文", value: "zh", url: "china.png" },
		// { label: "English", value: "en" },
		{ label: "Русский", value: "ru", url: 'russia.png' }
	];
	//更新权限关闭页面
	const initTabs = () => {
		tabsMenuList.value.map((e, t) => {
			let pathIdx = authStore.addressableMenuList.findIndex(item => item.path == e.path.split('?')[0]);
			if (pathIdx != -1) {
				e.title = authStore.addressableMenuList[pathIdx].title;
			} else {
				if(e.path != '/home/index'){
					tabsMenuList.value.splice(t);
				}
				
			}
		})
		if(tabsMenuList.value.length > 0){
			tabsMenuList.value[0].title = authStore.flatMenuListGet[0].meta.title;
		}
		
	};
	// initTabs()
	const changeLanguage = (lang : string) => {
		globalStore.setGlobalState("language", lang as LanguageType);
		const title = computed(() => lang == "zh" ? import.meta.env.VITE_GLOB_APP_TITLE_CN : import.meta.env.VITE_GLOB_APP_TITLE_RU)
		document.title = title.value;
		window.location.href=window.location.href
	};
	// const showLanguage = () => {
	// 	drawer.value = !drawer.value;
	// }
	// const changeLanguage = (lang : any) => {
	// 	let langVal = lang.target._value;
	// 	i18n.locale.value = langVal;
	// 	globalStore.setGlobalState("language", langVal as LanguageType);
	// 	const title = computed(() => langVal == "zh"? import.meta.env.VITE_GLOB_APP_TITLE_CN : import.meta.env.VITE_GLOB_APP_TITLE_RU)
	// 	document.title = title.value;
	// };
	const getAssetURL = (image : string) => {
		return new URL(`../../../../assets/images/${image}`, import.meta.url).href
	}
</script>
<style>
	.language_box {
		width: 160px;
	}

	.language_box .el-dropdown-menu {
		padding: 8px 0;
	}

	.language_box .el-dropdown-menu__item:not(.is-disabled):focus {
		color: var(--el-text-color-regular);
	}

	.language_box .el-dropdown-menu__item {
		padding: 10px 16px;
	}
</style>
<style scoped lang="scss">
	.language_img {
		width: 20px;
		height: 20px;
		margin-right: 10px;
	}

	.languages-content {
		width: 320px;

		.header {
			padding: 0 10px;
			width: 100%;
			box-sizing: border-box;
			font-size: 16px;
			color: #999;
			cursor: pointer;
		}

		.img-wrap {
			width: 100%;

			img {
				width: 280px;
				margin: 0 auto;
				display: block;
			}
		}
	}

	.languages-boxes {
		display: flex;
		flex-wrap: wrap;
		padding: 30px 0;

		.language-box {
			margin: 8px 8px 16px;
			width: calc(33.3% - 16px);
			display: flex;
			align-items: center;

			.language-option {
				position: relative;

				input {
					position: absolute;
					top: 0;
					inset-inline-start: 0;
					height: 100%;
					width: 100%;
					opacity: 0;
					cursor: pointer;
					z-index: 3;

					&:checked+.language-option-inner {
						border-color: var(--el-color-primary);

						.indicator {
							display: flex;
						}
					}
				}

				.language-option-inner {
					position: relative;
					display: flex;
					justify-content: center;
					align-items: center;
					height: 55px;
					width: 55px;
					border-radius: 9999px;
					border: 1.6px solid var(--el-bg-color);
					background: var(--el-bg-color);
					box-shadow: -1px 3px 10px 0 rgb(0 0 0 / 6%);
					transition: color .3s, background-color .3s, border-color .3s, height .3s, width .3s;

					img {
						display: block;
						width: 40px;
						min-width: 40px;
						height: 40px;
						border-radius: 9999px;
					}

					.indicator {
						position: absolute;
						top: -4px;
						inset-inline-end: -4px;
						height: 26px;
						width: 26px;
						border-radius: 9999px;
						display: none;
						justify-content: center;
						align-items: center;
						background: var(--el-color-primary);
						border: 3px solid var(--el-bg-color);
						box-sizing: border-box;

						.el-icon {
							width: 10px;
							height: 10px;
						}
					}
				}
			}
		}
	}
</style>